<template>
  <div v-show="$store.state.theme">
    <HeaderTop></HeaderTop>
    <Header id="header" :isFixed="isFixed" :barList="barList" :class="{fixed : isFixed}"></Header>
    <nuxt-child :style="{ marginTop: marginTop }"></nuxt-child>
    <ToolsBar></ToolsBar>
    <Footer :qrcode="qrcode" :articleList="articleList"></Footer>
  </div>
</template>

<script>
import HeaderTop from "@/components/HeaderTop";
import Header from "@/components/home/Header";
import Footer from "@/components/Footer";
import ToolsBar from "@/components/ToolsBar";
export default {
  name: "templatecenter",
  components: {
    HeaderTop,
    Header,
    Footer,
    ToolsBar
  },
  async asyncData({
    $axios,
    isDev,
    route,
    store,
    env,
    params,
    query,
    req,
    res,
    redirect,
    error
  }) {
    try {
      let [AllTemplate, FooterCode, FooterArticle] = await Promise.all([
        $axios.get(store.state.port.AllTemplate),
        $axios.get(store.state.port.Advertise + "?ID=136"),
        $axios.get("/Articles")
      ]);
      return {
        barList: AllTemplate.data,
        qrcode: FooterCode.data.Advertisements[0].FileUrl,
        articleList: FooterArticle.data,
        isFixed: false,
        marginTop: 0
      };
    } catch (err) {
      error({ statusCode: "404", message: err });
    }
  },
  head() {
    return {
      // title: this.$store.state.setting.WebName,
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content: this.$store.state.setting.KeyWords
        },
        {
          hid: "description",
          name: "description",
          content: this.$store.state.setting.Description
        }
      ]
    };
  },
  methods: {
    scrollToTop() {
      let osTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (osTop >= 40) {
        this.isFixed = true;
        this.marginTop = document.querySelector("#header").offsetHeight + "px";
      } else {
        this.isFixed = false;
        this.marginTop = 0;
      }
    }
  },
  mounted() {
    this.$setTheme(this.$store);
    this.$store.commit("login/addToKen", localStorage["token"]);
    window.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  }
};
</script>

<style lang="less" scoped>
</style>
